<template>
	<div class="home-container">
		<!-- 轮播图组件 -->
		<Carousel></Carousel>
		<!-- 搜索组件 -->
		<Search></Search>
		<el-row :gutter="20">
			<el-col :span="20">
				<div class="hospital-title">医院</div>
				<!-- 等级组件 -->
				<HospitalLevel></HospitalLevel>
				<!-- 地区组件 -->
				<HospitalArea></HospitalArea>
				<!-- 卡片组件 -->
				<HospitalCard></HospitalCard>
				<!-- 分页器组件 -->
				<Pagination></Pagination>
			</el-col>
			<el-col :span="4">2</el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
	export default {
		name: 'Home',
	};
</script>

<script setup lang="ts">
	import Carousel from './Carousel/index.vue';
	import Search from './Search/index.vue';
	import HospitalLevel from './HospitalLevel/index.vue';
	import HospitalArea from './HospitalArea/index.vue';
	import HospitalCard from './HospitalCard/index.vue';
	import Pagination from './Pagination/index.vue';
</script>

<style scoped lang="scss">
	.home-container {
		width: 1200px;
		color: #828282;
		font-size: 14px;

		.hospital-title {
			// width: 50px;
			margin-bottom: 20px;
		}
	}
</style>
